let columns = []; // 存储表结构
let currentEditId = null; // 当前编辑的记录 ID
let data = [];
let editingId = null;
let dataModal;
let currentTable = ''; // 当前选中的表名
let currentDatabase = 'dynamic_db'; // 默认数据库名
let dbConnectionStatus = false; // 数据库连接状态
let dbConfig = {}; // 存储数据库配置
let pageSize = 20; // 每页显示的记录数
let currentPage = 1; // 当前页码
let allTables = []; // 存储所有表名，用于搜索过滤

// 初始化加载表结构和数据
document.addEventListener("DOMContentLoaded", () => {
    dataModal = new bootstrap.Modal(document.getElementById('dataModal'));
    loadDBConfig();
    loadDatabases();
    updateConnectionInfo();

    // 初始化高级筛选区域
    if (document.getElementById('advancedFilterArea')) {
        document.getElementById('advancedFilterArea').style.display = 'none';
    }

    // 添加创建表按钮的事件监听器
    document.getElementById("createTableBtn").addEventListener("click", createTableHandler);
    
    // 添加列类型变更事件监听器
    const columnTypeSelect = document.getElementById("columnType");
    if (columnTypeSelect) {
        columnTypeSelect.addEventListener("change", updateColumnAttributeOptions);
    }
    
    // 初始化列属性设置
    initColumnAttributes();
    
    // 添加表搜索框的键盘事件监听
    const tableSearchInput = document.getElementById("tableSearchInput");
    if (tableSearchInput) {
        tableSearchInput.addEventListener("keydown", function(event) {
            // 按ESC键清除搜索
            if (event.key === "Escape") {
                clearTableSearch();
            }
        });
    }
});

// 检查列类型是否支持默认值
function canHaveDefaultValue(columnType) {
    const noDefaultTypes = ["TEXT", "LONGTEXT", "MEDIUMTEXT", "TINYTEXT", "BLOB", "GEOMETRY", "JSON"];
    return !noDefaultTypes.includes(columnType.toUpperCase());
}

// 更新列属性选项
function updateColumnAttributeOptions() {
    const columnType = document.getElementById("columnType").value;
    const isNumeric = ["INTEGER", "INT", "BIGINT", "SMALLINT", "TINYINT", "MEDIUMINT", "FLOAT", "DOUBLE", "DECIMAL"].includes(columnType.toUpperCase());
    const isDecimal = ["DECIMAL", "FLOAT", "DOUBLE"].includes(columnType.toUpperCase());
    
    // 更新无符号选项
    document.getElementById("columnUnsigned").disabled = !isNumeric;
    
    // 更新自动递增选项
    document.getElementById("columnAutoIncrement").disabled = !["INTEGER", "INT", "BIGINT", "SMALLINT", "TINYINT", "MEDIUMINT"].includes(columnType.toUpperCase());
    
    // 更新小数位数输入框
    document.getElementById("columnScale").disabled = !isDecimal;
    
    // 更新默认值输入框
    const defaultValueInput = document.getElementById("columnDefaultValue");
    const canHaveDefault = canHaveDefaultValue(columnType);
    defaultValueInput.disabled = !canHaveDefault;
    
    if (!canHaveDefault) {
        defaultValueInput.value = "";
        defaultValueInput.placeholder = "此类型不支持默认值";
    } else {
        defaultValueInput.placeholder = "默认值 (可选)";
    }
}

// 初始化列属性
function initColumnAttributes() {
    document.getElementById("columnNotNull").checked = false;
    document.getElementById("columnUnique").checked = false;
    document.getElementById("columnUnsigned").checked = false;
    document.getElementById("columnAutoIncrement").checked = false;
    document.getElementById("columnPrimaryKey").checked = false;
    document.getElementById("columnDefaultValue").value = "";
    document.getElementById("columnLength").value = "";
    document.getElementById("columnScale").value = "";
    
    // 初始化时更新属性选项
    updateColumnAttributeOptions();
}

// 显示数据库配置卡片
function showDBConfig() {
    const configCard = document.getElementById('dbConfigCard');
    configCard.style.display = 'block';
}

// 切换数据库配置表单的显示/隐藏
function toggleDBConfigForm() {
    const card = document.getElementById('dbConfigCard');
    if (card.style.display === 'none') {
        card.style.display = 'block';
    } else {
        card.style.display = 'none';
    }
}

// 更新数据库连接信息显示
function updateConnectionInfo() {
    const infoElement = document.getElementById('dbConnectionInfo');
    if (dbConnectionStatus) {
        // 获取当前选中的数据库
        const dbSelect = document.getElementById('dbSelect');
        const selectedDB = dbSelect.value || dbConfig.dbname || '未选择';
        
        infoElement.innerHTML = `
            <span class="text-success">
                <i class="bi bi-check-circle-fill"></i> 
                已连接到 ${dbConfig.host}:${dbConfig.port} | 当前数据库: <strong>${selectedDB}</strong>
            </span>`;
    } else {
        infoElement.innerHTML = `
            <span class="text-danger">
                <i class="bi bi-exclamation-triangle-fill"></i> 
                数据库未连接，使用.env文件中的配置
            </span>`;
    }
}

// 加载数据库配置
function loadDBConfig() {
    fetch("/api/dbconfig")
        .then(res => {
            if (!res.ok) {
                throw new Error("无法加载数据库配置");
            }
            return res.json();
        })
        .then(config => {
            document.getElementById('dbHost').value = config.host || '';
            document.getElementById('dbPort').value = config.port || '';
            document.getElementById('dbUser').value = config.user || '';
            document.getElementById('dbName').value = config.dbname || '';
            // 密码不会从服务器返回，出于安全考虑
            
            // 保存当前配置到全局变量
            dbConfig = {
                host: config.host,
                port: config.port,
                user: config.user,
                dbname: config.dbname
            };
        })
        .catch(error => {
            console.error("加载数据库配置失败:", error);
            // 显示数据库配置表单，让用户可以输入配置
            showDBConfig();
        });
}

// 更新数据库配置
function updateDBConfig() {
    const config = {
        host: document.getElementById('dbHost').value,
        port: document.getElementById('dbPort').value,
        user: document.getElementById('dbUser').value,
        password: document.getElementById('dbPassword').value,
        dbname: document.getElementById('dbName').value
    };

    // 验证必填字段
    if (!config.host || !config.port || !config.user || !config.dbname) {
        alert("主机、端口、用户名和数据库名为必填项");
        return;
    }

    // 显示加载状态
    const saveButton = document.querySelector('button[onclick="updateDBConfig()"]');
    const originalText = saveButton.textContent;
    saveButton.textContent = "连接中...";
    saveButton.disabled = true;

    fetch("/api/dbconfig", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(config)
    })
        .then(res => {
            if (!res.ok) {
                return res.json().then(data => {
                    throw new Error(data.error || "连接失败");
                });
            }
            return res.json();
        })
        .then(data => {
            alert("数据库连接成功");
            dbConnectionStatus = true;
            // 更新当前数据库名
            currentDatabase = config.dbname;
            // 保存配置到全局变量
            dbConfig = {
                host: config.host,
                port: config.port,
                user: config.user,
                dbname: config.dbname
            };
            // 更新连接信息显示
            updateConnectionInfo();
            // 重新加载数据库和表
            loadDatabases();
            // 隐藏配置表单
            toggleDBConfigForm();
        })
        .catch(error => {
            console.error("更新数据库配置失败:", error);
            alert("连接失败: " + error.message);
            dbConnectionStatus = false;
            updateConnectionInfo();
        })
        .finally(() => {
            // 恢复按钮状态
            saveButton.textContent = originalText;
            saveButton.disabled = false;
        });
}

// 加载所有数据库
function loadDatabases() {
    fetch("/api/databases")
        .then(res => {
            if (!res.ok) {
                return res.json().then(data => {
                    throw new Error(data.error || "加载数据库失败");
                });
            }
            return res.json();
        })
        .then(databases => {
            const select = document.getElementById("dbSelect");
            select.innerHTML = '';
            
            if (databases.length === 0) {
                select.innerHTML = '<option value="">未找到可用数据库</option>';
                showDBConfig(); // 显示配置表单
                dbConnectionStatus = false;
                updateConnectionInfo();
                return;
            }
            
            // 添加所有数据库选项
            databases.forEach(db => {
                const option = document.createElement('option');
                option.value = db;
                option.textContent = db;
                select.appendChild(option);
            });
            
            // 设置默认选中的数据库
            // 如果当前数据库在列表中，则选中它
            const dbOption = Array.from(select.options).find(opt => opt.value === currentDatabase);
            if (dbOption) {
                dbOption.selected = true;
            } else if (select.options.length > 0) {
                // 否则选择第一个数据库
                select.options[0].selected = true;
                currentDatabase = select.options[0].value;
            }
            
            // 初始加载表
            loadTables();
            
            // 连接成功
            dbConnectionStatus = true;
            updateConnectionInfo();
        })
        .catch(error => {
            console.error("加载数据库失败:", error);
            // 如果加载失败，显示错误信息
            const select = document.getElementById("dbSelect");
            select.innerHTML = `<option value="">数据库连接失败</option>`;
            // 显示数据库配置表单
            showDBConfig();
            
            // 连接失败
            dbConnectionStatus = false;
            updateConnectionInfo();
            
            // 显示错误消息
            alert("数据库连接失败: " + error.message + "\n请检查数据库配置并重新连接。");
        });
}

// 数据库选择改变时的处理
function onDatabaseChange() {
    const select = document.getElementById("dbSelect");
    if (select.value) {
        currentDatabase = select.value;
        
        // 更新连接信息
        dbConfig.dbname = currentDatabase;
        updateConnectionInfo();
        
        // 清空表选择和数据显示
        document.getElementById("tableSelect").innerHTML = '<option value="">请选择数据表...</option>';
        document.getElementById("structureBody").innerHTML = "";
        document.getElementById("dataBody").innerHTML = "";
        document.getElementById("dataHeader").innerHTML = "";
        
        // 加载新数据库的表
        loadTables();
    }
}

// 加载所有数据表
function loadTables() {
    fetch(`/api/tables?database=${encodeURIComponent(currentDatabase)}`)
        .then(res => {
            if (!res.ok) {
                return res.json().then(data => {
                    throw new Error(data.error || "加载表失败");
                });
            }
            return res.json();
        })
        .then(tables => {
            // 存储所有表名到全局变量
            allTables = tables;
            
            // 更新下拉框
            updateTableSelect(tables);
        })
        .catch(error => {
            console.error("加载表失败:", error);
            const select = document.getElementById("tableSelect");
            select.innerHTML = '<option value="">加载表失败</option>';
        });
}

// 更新表选择下拉框
function updateTableSelect(tables) {
    const select = document.getElementById("tableSelect");
    select.innerHTML = '<option value="">请选择数据表...</option>';
    tables.forEach(table => {
        select.innerHTML += `<option value="${table}">${table}</option>`;
    });
}

// 过滤表名
function filterTables() {
    const searchInput = document.getElementById("tableSearchInput");
    const searchResults = document.getElementById("tableSearchResults");
    const keyword = searchInput.value.toLowerCase().trim();
    
    if (!keyword) {
        // 如果搜索框为空，显示所有表
        updateTableSelect(allTables);
        searchResults.innerHTML = "";
        return;
    }
    
    // 过滤匹配的表
    const filteredTables = allTables.filter(table => 
        table.toLowerCase().includes(keyword)
    );
    
    // 更新下拉框
    updateTableSelect(filteredTables);
    
    // 显示搜索结果数量
    if (filteredTables.length === 0) {
        searchResults.innerHTML = `<span class="text-danger">未找到匹配的表</span>`;
    } else {
        searchResults.innerHTML = `找到 ${filteredTables.length} 个匹配的表`;
    }
    
    // 如果只有一个匹配结果，可以自动选中（可选功能）
    if (filteredTables.length === 1) {
        const select = document.getElementById("tableSelect");
        select.value = filteredTables[0];
        // 触发表选择变更事件
        onTableChange();
    }
}

// 清除表搜索
function clearTableSearch() {
    const searchInput = document.getElementById("tableSearchInput");
    const searchResults = document.getElementById("tableSearchResults");
    
    // 清空搜索框
    searchInput.value = "";
    
    // 清空搜索结果提示
    searchResults.innerHTML = "";
    
    // 恢复显示所有表
    updateTableSelect(allTables);
    
    // 聚焦到搜索框
    searchInput.focus();
}

// 表选择改变时的处理
function onTableChange() {
    const select = document.getElementById("tableSelect");
    currentTable = select.value;
    if (currentTable) {
        loadTableStructure();
        // 不再自动加载数据，只显示提示信息
        const tbody = document.getElementById("dataBody");
        if (tbody) {
            const thead = document.getElementById("dataHeader");
            if (thead) {
                updateDataTableHeader(); // 更新表头
            }
            
            // 显示提示信息，要求用户输入ID查询
            tbody.innerHTML = `<tr><td colspan="100" class="text-center">
                <div class="alert alert-info">
                    <i class="bi bi-info-circle"></i> 请在上方输入ID进行查询，或点击"显示最新数据"查看最近记录
                </div>
            </td></tr>`;
        }
    } else {
        // 清空显示
        document.getElementById("structureBody").innerHTML = "";
        document.getElementById("dataBody").innerHTML = "";
        document.getElementById("dataHeader").innerHTML = "";
    }
}

// 加载表结构
function loadTableStructure() {
    try {
        fetch(`/api/table/${currentTable}?database=${encodeURIComponent(currentDatabase)}`)
            .then(res => {
                if (!res.ok) {
                    return res.json().then(data => {
                        throw new Error(data.error || "加载表结构失败");
                    });
                }
                return res.json();
            })
        .then(data => {
                // 确保data是数组
                if (!Array.isArray(data)) {
                    console.log("返回的表结构不是数组，使用空数组代替");
                    data = [];
                }
                
            columns = data;
            const tbody = document.getElementById("structureBody");
                if (!tbody) {
                    console.log("未找到表结构表格元素");
                    return;
                }
                
            tbody.innerHTML = "";
            data.forEach(col => {
                    if (!col || !col.name) return; // 跳过无效列
                    
                    // 不允许删除或重命名ID列
                    let actionButtons = '';
                    if (col.name.toLowerCase() === 'id') {
                        actionButtons = '<button class="btn btn-danger btn-sm me-1" disabled>不可删除</button>' +
                                       '<button class="btn btn-primary btn-sm" disabled>不可重命名</button>';
                    } else {
                        actionButtons = `<button class="btn btn-danger btn-sm me-1" onclick="deleteColumn('${col.name}')">删除</button>` +
                                       `<button class="btn btn-primary btn-sm me-1" onclick="showRenameColumnModal('${col.name}')">重命名</button>` +
                                       `<button class="btn btn-info btn-sm" onclick="showEditColumnModal('${col.name}')">编辑</button>`;
                    }
                    
                    const typeName = getColumnTypeName(col.type || 'TEXT');
                    
                    // 构建属性描述
                    let attributesText = [];
                    if (col.attributes) {
                        if (col.attributes.primaryKey) attributesText.push("主键");
                        if (col.attributes.notNull) attributesText.push("非空");
                        if (col.attributes.unique) attributesText.push("唯一");
                        if (col.attributes.autoIncrement) attributesText.push("自增");
                        if (col.attributes.unsigned) attributesText.push("无符号");
                        if (col.attributes.defaultValue) attributesText.push(`默认值: ${col.attributes.defaultValue}`);
                        if (col.comment && col.comment !== col.name) attributesText.push(`注释: ${col.comment}`);
                    }
                    const attributesDisplay = attributesText.length > 0 ? attributesText.join(", ") : "-";
                    
                    const row = `<tr>
                        <td>${col.name}</td>
                        <td>${typeName}</td>
                        <td>${attributesDisplay}</td>
                        <td>${actionButtons}</td>
                    </tr>`;
                tbody.innerHTML += row;
            });
            updateDataTableHeader();
            
            // 更新筛选字段选项
            updateFilterFieldOptions();
            })
            .catch(error => {
                console.error("加载表结构失败:", error);
                // 不显示错误提示，只在控制台记录
                
                // 如果是数据库连接问题，显示配置表单
                if (error.message && (error.message.includes("数据库未连接") || error.message.includes("数据库连接失败"))) {
                    showDBConfig();
                    dbConnectionStatus = false;
                    updateConnectionInfo();
                }
            });
    } catch (error) {
        console.log("加载表结构时出错:", error);
        // 不显示错误提示，只在控制台记录
    }
}

// 获取列类型的中文名称
function getColumnTypeName(type) {
    const typeMap = {
        // 字符串类型
        'TEXT': '文本',
        'VARCHAR': '可变长文本',
        'CHAR': '定长文本',
        'LONGTEXT': '长文本',
        'MEDIUMTEXT': '中等文本',
        'TINYTEXT': '短文本',
        // 数值类型
        'INTEGER': '整数',
        'INT': '整数',
        'BIGINT': '大整数',
        'SMALLINT': '小整数',
        'TINYINT': '微整数',
        'MEDIUMINT': '中整数',
        'REAL': '浮点数',
        'FLOAT': '单精度浮点',
        'DOUBLE': '双精度浮点',
        'DECIMAL': '定点数',
        // 日期和时间类型
        'DATE': '日期',
        'TIME': '时间',
        'DATETIME': '日期时间',
        'TIMESTAMP': '时间戳',
        'YEAR': '年份',
        // 布尔类型
        'BOOLEAN': '布尔值',
        // 二进制类型
        'BLOB': '二进制对象',
        'BINARY': '定长二进制',
        'VARBINARY': '可变长二进制',
        // JSON类型
        'JSON': 'JSON'
    };
    return typeMap[type] || type;
}

// 添加列
function addColumn() {
    if (!currentTable) {
        alert("请先选择一个数据表");
        return;
    }

    const columnName = document.getElementById("columnName").value;
    const columnType = document.getElementById("columnType").value;

    if (!columnName) {
        alert("请输入列名");
        return;
    }

    if (!columnType) {
        alert("请选择数据类型");
        return;
    }

    // 获取列属性
    const notNull = document.getElementById("columnNotNull").checked;
    const defaultValue = document.getElementById("columnDefaultValue").value.trim();
    const unique = document.getElementById("columnUnique").checked;
    const length = document.getElementById("columnLength").value.trim();
    const scale = document.getElementById("columnScale").value.trim();
    const unsigned = document.getElementById("columnUnsigned").checked;
    const autoIncrement = document.getElementById("columnAutoIncrement").checked;
    const primaryKey = document.getElementById("columnPrimaryKey").checked;
    // 获取列注释，如果为空则默认使用列名
    let comment = document.getElementById("columnDescription").value.trim();
    if (!comment) {
        comment = columnName;
    }

    // 显示加载状态
    const addButton = document.querySelector('button[onclick="addColumn()"]');
    const originalText = addButton.textContent;
    addButton.textContent = "添加中...";
    addButton.disabled = true;

    // 构建列对象
    const columnData = {
        name: columnName,
        type: columnType,
        comment: comment,
        attributes: {
            notNull: notNull,
            defaultValue: defaultValue,
            unique: unique,
            length: length,
            scale: scale,
            unsigned: unsigned,
            autoIncrement: autoIncrement,
            primaryKey: primaryKey
        }
    };

    fetch(`/api/table/${currentTable}?database=${encodeURIComponent(currentDatabase)}`, {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify(columnData)
    })
    .then(response => {
        // 恢复按钮状态
        addButton.textContent = originalText;
        addButton.disabled = false;

        if (!response.ok) {
            return response.json().then(err => {
                throw new Error(err.error || "添加列失败");
            });
        }
        return response.json();
    })
        .then(data => {
        // 清空表单
        document.getElementById("columnName").value = "";
        document.getElementById("columnDefaultValue").value = "";
        document.getElementById("columnLength").value = "";
        document.getElementById("columnScale").value = "";
        document.getElementById("columnDescription").value = "";
        initColumnAttributes();

        // 显示成功消息
        showToast("列添加成功", "success");

        // 重新加载表结构
                loadTableStructure();
    })
    .catch(error => {
        // 显示错误消息
        alert("添加列失败：" + error.message);
        console.error("添加列错误:", error);
        });
}

// 加载数据
function loadData(id = null, page = 1) {
    if (!currentTable) return;

    currentPage = page;

    // 显示加载中提示
            const tbody = document.getElementById("dataBody");
    if (tbody) {
        tbody.innerHTML = `<tr><td colspan="100" class="text-center">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <span class="ms-2">数据加载中，请稍候...</span>
        </td></tr>`;
    }

    let url = `/api/data/${currentTable}?database=${encodeURIComponent(currentDatabase)}`;
    if (id) {
        url += `&id=${id}`;
    } else {
        // 使用分页参数
        url += `&limit=${pageSize}&page=${page}`;
    }

    fetch(url)
        .then(res => {
            if (!res.ok) {
                return res.json().then(data => {
                    throw new Error(data.error || "加载数据失败");
                });
            }
            return res.json();
        })
        .then(response => {
            console.log("获取到的响应:", response);
            
            // 处理不同的响应格式
            let dataArray = [];
            let pagination = { total: 0, page: 1, limit: 10, pages: 1 };
            
            // 检查响应格式
            if (Array.isArray(response)) {
                // 旧格式：直接是数组
                dataArray = response;
            } else if (response && typeof response === 'object') {
                if (response.data && Array.isArray(response.data)) {
                    // 新格式：包含data字段的对象
                    dataArray = response.data;
                    pagination = response.pagination || pagination;
                } else if (id && response.data && response.data.id) {
                    // 单条记录查询，data字段包含单个对象
                    dataArray = [response.data];
                } else if (id && response.id) {
                    // 单条记录查询可能直接返回对象（没有包装在data字段中）
                    dataArray = [response];
                } else {
                    // 其他情况，尝试作为单个对象处理
                    console.log("未识别的响应格式，尝试作为单个对象处理:", response);
                    dataArray = [response];
                }
            }
            
            console.log("处理后的数据数组:", dataArray);
            console.log("当前列结构:", columns);
            
            if (!tbody) {
                console.log("未找到数据表格元素");
                return;
            }
            
            tbody.innerHTML = "";
            
            // 检查columns是否存在且不为空
            if (!columns || columns.length === 0) {
                console.log("列结构为空，尝试重新加载表结构");
                // 尝试重新加载表结构，但不显示错误提示
                loadTableStructure();
                return;
            }
            
            // 使用文档片段提高性能
            const fragment = document.createDocumentFragment();
            
            dataArray.forEach(item => {
                if (!item) return; // 跳过null或undefined项
                
                console.log("处理数据项:", item, "ID:", item.id);
                const tr = document.createElement('tr');
                
                // 确保按照表结构中的列顺序显示数据
                columns.forEach(col => {
                    if (!col) return; // 跳过null或undefined列
                    
                    const td = document.createElement('td');
                    
                    if (col.name && col.name.toLowerCase() === 'id') {
                        td.textContent = item.id || "";
                    } else if (col.name) {
                        // 尝试以不区分大小写的方式查找字段值
                        let value = null;
                        // 首先尝试直接使用列名
                        if (item.fields && item.fields[col.name] !== undefined) {
                            value = item.fields[col.name];
                        } else if (item.fields) {
                            // 如果找不到，尝试查找不区分大小写的字段名
                            const fieldKeys = Object.keys(item.fields || {});
                            const fieldName = fieldKeys.find(
                                key => key.toLowerCase() === col.name.toLowerCase()
                            );
                            if (fieldName) {
                                value = item.fields[fieldName];
                            }
                        }
                        td.textContent = value !== null && value !== undefined ? value : "";
                    }
                    
                    tr.appendChild(td);
                });
                
                // 添加操作按钮
                const actionTd = document.createElement('td');
                actionTd.innerHTML = `
                    <button class="btn btn-warning btn-sm" onclick="editData(${item.id || 0})">编辑</button>
                    <button class="btn btn-danger btn-sm" onclick="deleteData(${item.id || 0})">删除</button>
                `;
                tr.appendChild(actionTd);
                
                fragment.appendChild(tr);
            });
            
            tbody.appendChild(fragment);

            // 如果没有数据，显示提示信息
            if (dataArray.length === 0) {
                const colSpan = columns.length + 1; // 列数 + 操作列
                tbody.innerHTML = `<tr><td colspan="${colSpan}" class="text-center">暂无数据</td></tr>`;
            }
            
            // 更新分页控件
            if (!id && response.pagination) {
                updatePagination(response.pagination);
            } else {
                // 隐藏分页控件
                const paginationContainer = document.getElementById('dataPagination');
                if (paginationContainer) {
                    paginationContainer.style.display = 'none';
                }
            }
        })
        .catch(error => {
            console.error("加载数据失败:", error);
            if (tbody) {
                const colSpan = columns && columns.length ? columns.length + 1 : 3;
                tbody.innerHTML = `<tr><td colspan="${colSpan}" class="text-center text-danger">
                    <i class="bi bi-exclamation-triangle"></i> 加载失败: ${error.message}
                </td></tr>`;
            }
        });
}

// 更新数据表格头部
function updateDataTableHeader() {
    try {
    const thead = document.getElementById("dataHeader");
        if (!thead) return;
        
        let header = "<tr>";
        
        // 检查columns是否存在且不为空
        if (columns && columns.length > 0) {
    columns.forEach(col => {
                if (col && col.name) {
        header += `<th>${col.name}</th>`;
                }
            });
        } else {
            // 如果没有列，至少显示一个ID列
            header += "<th>ID</th>";
        }
        
        header += "<th>操作</th></tr>";
    thead.innerHTML = header;
    } catch (error) {
        console.log("更新表头时出错:", error);
        // 不显示错误提示，只在控制台记录
    }
}

// 显示添加/编辑表单
function showAddForm() {
    try {
        if (!currentTable) {
            console.log("未选择数据表");
            return;
        }
    
        // 检查columns是否存在且不为空
        if (!columns || columns.length === 0) {
            console.log("表结构为空，请先添加列");
            return;
        }
    
    currentEditId = null;
        const modalTitle = document.getElementById("modalTitle");
    const modalBody = document.getElementById("modalBody");
        
        if (!modalTitle || !modalBody) {
            console.log("未找到模态框元素");
            return;
        }
        
        modalTitle.innerText = "添加数据";
    let form = "";
        
    columns.forEach(col => {
            if (!col || !col.name) return; // 跳过无效列
            
            if (col.name.toLowerCase() !== 'id') { // 不显示 ID 字段的输入框
                const typeName = getColumnTypeName(col.type || 'TEXT');
                const inputType = getInputType(col.type || 'TEXT');
                
                form += `<div class="mb-3">
                    <label class="form-label">${col.name} (${typeName})</label>`;
                
                if (inputType === 'textarea') {
                    form += `<textarea class="form-control" id="field-${col.name}" name="${col.name}" rows="3" required></textarea>`;
                } else if (inputType === 'checkbox') {
                    form += `<div class="form-check">
                        <input type="${inputType}" class="form-check-input" id="field-${col.name}" name="${col.name}">
                        <label class="form-check-label" for="field-${col.name}">是</label>
            </div>`;
                } else {
                    form += `<input type="${inputType}" class="form-control" id="field-${col.name}" name="${col.name}" required>`;
                }
                
                form += `</div>`;
            }
        });
        
    modalBody.innerHTML = form;
        
        if (dataModal) {
            dataModal.show();
        } else {
            console.log("模态框实例未初始化");
        }
    } catch (error) {
        console.log("显示添加表单时出错:", error);
        // 不显示错误提示，只在控制台记录
    }
}

// 获取输入类型
function getInputType(columnType) {
    const typeMap = {
        // 字符串类型
        'TEXT': 'text',
        'VARCHAR': 'text',
        'CHAR': 'text',
        'LONGTEXT': 'textarea',
        'MEDIUMTEXT': 'textarea',
        'TINYTEXT': 'text',
        // 数值类型
        'INTEGER': 'number',
        'INT': 'number',
        'BIGINT': 'number',
        'SMALLINT': 'number',
        'TINYINT': 'number',
        'MEDIUMINT': 'number',
        'REAL': 'number',
        'FLOAT': 'number',
        'DOUBLE': 'number',
        'DECIMAL': 'number',
        // 日期和时间类型
        'DATE': 'date',
        'TIME': 'time',
        'DATETIME': 'datetime-local',
        'TIMESTAMP': 'datetime-local',
        'YEAR': 'number',
        // 布尔类型
        'BOOLEAN': 'checkbox',
        // 其他类型
        'JSON': 'textarea'
    };
    return typeMap[columnType] || 'text';
}

// 编辑数据
function editData(id) {
    try {
        if (!currentTable) return;
    
        // 检查columns是否存在且不为空
        if (!columns || columns.length === 0) {
            console.log("表结构为空，无法编辑数据");
            return;
        }
    
        currentEditId = id;
        const modalTitle = document.getElementById("modalTitle");
        if (modalTitle) {
            modalTitle.innerText = "编辑数据";
        }
        
        // 显示加载中状态
        const modalBody = document.getElementById("modalBody");
        if (modalBody) {
            modalBody.innerHTML = `
                <div class="text-center my-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                    <p class="mt-2">数据加载中，请稍候...</p>
                </div>
            `;
            
            // 显示模态框，让用户知道正在加载
            if (dataModal) {
                dataModal.show();
            }
        }
        
        // 只获取特定ID的数据
        fetch(`/api/data/${currentTable}?database=${encodeURIComponent(currentDatabase)}&id=${id}`)
            .then(res => {
                if (!res.ok) {
                    return res.json().then(data => {
                        throw new Error(data.error || "加载数据失败");
                    });
                }
                return res.json();
            })
            .then(response => {
                console.log("编辑数据API返回:", response);
                
                // 处理不同的响应格式
                let item = null;
                
                // 检查响应格式
                if (Array.isArray(response)) {
                    // 直接是数组
                    item = response.length > 0 ? response[0] : null;
                } else if (response && typeof response === 'object') {
                    if (response.data && Array.isArray(response.data)) {
                        // 包含data字段的对象
                        item = response.data.length > 0 ? response.data[0] : null;
                    } else if (response.data && response.data.id) {
                        // 单条记录查询，data字段包含单个对象
                        item = response.data;
                    } else if (response.id) {
                        // 单条记录查询可能直接返回对象
                        item = response;
                    }
                }
                
                if (!item) {
                    throw new Error("未找到ID为 " + id + " 的数据");
                }
                
                if (!modalBody) {
                    console.log("未找到模态框内容元素");
                    return;
                }
                
                // 添加隐藏的ID字段
                let form = `<input type="hidden" id="recordId" name="id" value="${id}">`;
                
                columns.forEach(col => {
                    if (!col || !col.name) return; // 跳过无效列
                    
                    if (col.name.toLowerCase() !== 'id') { // 不显示 ID 字段的输入框
                        // 尝试以不区分大小写的方式查找字段值
                        let value = "";
                        // 首先尝试直接使用列名
                        if (item.fields && item.fields[col.name] !== undefined) {
                            value = item.fields[col.name];
                        } else if (item.fields) {
                            // 如果找不到，尝试查找不区分大小写的字段名
                            const fieldKeys = Object.keys(item.fields || {});
                            const fieldName = fieldKeys.find(
                                key => key && key.toLowerCase() === col.name.toLowerCase()
                            );
                            if (fieldName) {
                                value = item.fields[fieldName];
                            }
                        }
                        
                        const typeName = getColumnTypeName(col.type || 'TEXT');
                        const inputType = getInputType(col.type || 'TEXT');
                        
                        form += `<div class="mb-3">
                            <label class="form-label">${col.name} (${typeName})</label>`;
                        
                        if (inputType === 'textarea') {
                            form += `<textarea class="form-control" id="field-${col.name}" name="${col.name}" rows="3" required>${value || ""}</textarea>`;
                        } else if (inputType === 'checkbox') {
                            const checked = value == 1 || value === true || value === 'true' || value === 'on' ? 'checked' : '';
                            form += `<div class="form-check">
                                <input type="${inputType}" class="form-check-input" id="field-${col.name}" name="${col.name}" ${checked}>
                                <label class="form-check-label" for="field-${col.name}">是</label>
                            </div>`;
                        } else {
                            form += `<input type="${inputType}" class="form-control" id="field-${col.name}" name="${col.name}" value="${value || ""}" required>`;
                        }
                        
                        form += `</div>`;
                    }
                });
                modalBody.innerHTML = form;
            })
            .catch(error => {
                console.error("加载数据失败:", error);
                // 显示错误信息
                if (modalBody) {
                    modalBody.innerHTML = `
                        <div class="alert alert-danger">
                            <i class="bi bi-exclamation-circle"></i> ${error.message || "加载数据失败"}
                        </div>
                    `;
                }
            });
    } catch (error) {
        console.log("编辑数据时出错:", error);
        // 不显示错误提示，只在控制台记录
    }
}

// 保存数据按钮点击事件
document.getElementById("saveDataBtn").addEventListener("click", function() {
    const isEdit = document.getElementById("modalTitle").innerText.includes("编辑");
    const formData = {};
    const inputs = document.querySelectorAll("#modalBody input, #modalBody textarea, #modalBody select");
    
    inputs.forEach(input => {
        let value;
        if (input.type === "checkbox") {
            value = input.checked ? 1 : 0;
        } else if (input.tagName === "TEXTAREA") {
            value = input.value;
        } else {
            value = input.value;
        }
        formData[input.name] = value;
    });

    const data = {
        fields: formData
    };

    let url = `/api/data/${currentTable}?database=${encodeURIComponent(currentDatabase)}`;
    let method = "POST";

    if (isEdit) {
        const id = document.getElementById("recordId").value;
        url = `/api/data/${currentTable}/${id}?database=${encodeURIComponent(currentDatabase)}`;
        method = "PUT";
    }

    // 显示加载状态
    const modalBody = document.getElementById("modalBody");
    const originalContent = modalBody.innerHTML;
    modalBody.innerHTML = `
        <div class="text-center">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-2">正在保存数据...</p>
        </div>
    `;

    fetch(url, {
        method: method,
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    })
    .then(response => {
        if (!response.ok) {
            return response.json().then(err => {
                throw new Error(err.error || "保存数据失败");
            });
        }
        return response.json();
    })
    .then(result => {
        // 关闭模态框
        const modal = bootstrap.Modal.getInstance(document.getElementById('dataModal'));
        modal.hide();
        
        if (isEdit) {
            // 编辑操作成功后重新加载数据
            loadData();
        } else {
            // 添加操作成功后，如果返回了新数据，直接添加到表格中
            if (result.data) {
                // 获取表头
                updateDataTableHeader();
                
                // 获取表体
                const tbody = document.getElementById("dataBody");
                
                // 如果表体为空或只有提示信息，清空它
                if (tbody.innerHTML.includes("alert-info") || tbody.innerHTML.includes("alert-warning")) {
                    tbody.innerHTML = "";
                }
                
                // 创建新行
                const newRow = document.createElement("tr");
                
                // 添加ID列
                const idCell = document.createElement("td");
                idCell.textContent = result.data.id;
                newRow.appendChild(idCell);
                
                // 添加其他字段
                for (const key in result.data.fields) {
                    const cell = document.createElement("td");
                    cell.textContent = result.data.fields[key];
                    newRow.appendChild(cell);
                }
                
                // 添加操作列
                const actionCell = document.createElement("td");
                actionCell.innerHTML = `
                    <button class="btn btn-sm btn-primary me-1" onclick="editData(${result.data.id})">编辑</button>
                    <button class="btn btn-sm btn-danger" onclick="deleteData(${result.data.id})">删除</button>
                `;
                newRow.appendChild(actionCell);
                
                // 将新行添加到表格顶部
                if (tbody.firstChild) {
                    tbody.insertBefore(newRow, tbody.firstChild);
                } else {
                    tbody.appendChild(newRow);
                }
                
                // 显示成功消息
                showToast("数据添加成功", "success");
            } else {
                // 如果没有返回数据，则重新加载
                loadData();
            }
        }
    })
    .catch(error => {
        // 恢复模态框内容
        modalBody.innerHTML = originalContent;
        
        // 显示错误消息
        alert("保存失败: " + error.message);
        console.error("保存数据错误:", error);
    });
});

// 显示提示消息
function showToast(message, type = "info") {
    // 创建toast元素
    const toastContainer = document.createElement("div");
    toastContainer.className = "position-fixed bottom-0 end-0 p-3";
    toastContainer.style.zIndex = "5";
    
    const toastEl = document.createElement("div");
    toastEl.className = `toast align-items-center text-white bg-${type}`;
    toastEl.setAttribute("role", "alert");
    toastEl.setAttribute("aria-live", "assertive");
    toastEl.setAttribute("aria-atomic", "true");
    
    toastEl.innerHTML = `
        <div class="d-flex">
            <div class="toast-body">
                ${message}
            </div>
            <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
    `;
    
    toastContainer.appendChild(toastEl);
    document.body.appendChild(toastContainer);
    
    // 初始化并显示toast
    const toast = new bootstrap.Toast(toastEl, {
        delay: 3000
    });
    toast.show();
    
    // 监听隐藏事件，移除元素
    toastEl.addEventListener('hidden.bs.toast', function () {
        document.body.removeChild(toastContainer);
    });
}

// 删除数据
function deleteData(id) {
    if (!currentTable) return;

    if (confirm("确定要删除这条数据吗？")) {
        fetch(`/api/data/${currentTable}/${id}?database=${encodeURIComponent(currentDatabase)}`, { method: "DELETE" })
        .then(res => res.json())
        .then(data => {
            if (data.error) {
                alert(data.error);
            } else {
                    alert("数据删除成功");
                loadData();
            }
        });
    }
}

// 删除列
function deleteColumn(columnName) {
    if (!currentTable) {
        alert("请先选择数据表");
        return;
    }

    if (!confirm(`确定要删除列 "${columnName}" 吗？此操作不可恢复，并且会删除该列的所有数据！`)) {
        return;
    }

    fetch(`/api/table/${currentTable}/column/${columnName}?database=${encodeURIComponent(currentDatabase)}`, {
        method: "DELETE"
    })
        .then(res => res.json())
        .then(data => {
            if (data.error) {
                alert(data.error);
            } else {
                alert("列删除成功");
                loadTableStructure();
                loadData();
            }
        })
        .catch(error => {
            console.error("删除列失败:", error);
            alert("删除列失败，请检查控制台获取详细信息");
        });
}

// 显示重命名列的模态框
function showRenameColumnModal(columnName) {
    if (!currentTable) {
        alert("请先选择数据表");
        return;
    }

    // 创建模态框HTML
    const modalHtml = `
    <div class="modal fade" id="renameColumnModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">重命名列</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">当前列名</label>
                        <input type="text" class="form-control" id="currentColumnName" value="${columnName}" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">新列名</label>
                        <input type="text" class="form-control" id="newColumnName" placeholder="请输入新列名">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="renameColumn('${columnName}')">保存</button>
                </div>
            </div>
        </div>
    </div>`;

    // 添加模态框到DOM
    const modalContainer = document.createElement('div');
    modalContainer.innerHTML = modalHtml;
    document.body.appendChild(modalContainer);

    // 显示模态框
    const renameModal = new bootstrap.Modal(document.getElementById('renameColumnModal'));
    renameModal.show();

    // 模态框关闭时移除DOM
    document.getElementById('renameColumnModal').addEventListener('hidden.bs.modal', function () {
        document.body.removeChild(modalContainer);
    });
}

// 重命名列
function renameColumn(oldColumnName) {
    if (!currentTable) {
        alert("请先选择数据表");
        return;
    }

    const newColumnName = document.getElementById("newColumnName").value;
    if (!newColumnName) {
        alert("请输入新列名");
        return;
    }

    fetch(`/api/table/${currentTable}/column/${oldColumnName}?database=${encodeURIComponent(currentDatabase)}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ newName: newColumnName })
    })
            .then(res => res.json())
            .then(data => {
                if (data.error) {
                    alert(data.error);
                } else {
                alert("列重命名成功");
                // 关闭模态框
                const renameModal = bootstrap.Modal.getInstance(document.getElementById('renameColumnModal'));
                renameModal.hide();
                // 重新加载表结构和数据
                loadTableStructure();
                    loadData();
                }
        })
        .catch(error => {
            console.error("重命名列失败:", error);
            alert("重命名列失败，请检查控制台获取详细信息");
        });
}

// 通过ID查询数据
function searchById() {
    try {
        if (!currentTable) {
            alert("请先选择一个数据表");
            console.log("未选择数据表");
            return;
        }
        
        const searchIdInput = document.getElementById('searchId');
        if (!searchIdInput) {
            console.log("未找到ID输入框");
            return;
        }
        
        const id = searchIdInput.value.trim();
        console.log("查询ID:", id);
        
        if (!id) {
            alert("请输入要查询的ID");
            console.log("ID为空");
            return;
        }
        
        // 显示加载状态
        const tbody = document.getElementById("dataBody");
        if (tbody) {
            tbody.innerHTML = `<tr><td colspan="100" class="text-center">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">加载中...</span>
                </div>
                <span class="ms-2">正在查询ID: ${id}，请稍候...</span>
            </td></tr>`;
        }
        
        // 确保表结构已加载
        if (!columns || columns.length === 0) {
            console.log("列结构为空，先加载表结构");
            loadTableStructure();
        }
        
        // 调用loadData函数，传入ID参数
        console.log("开始查询ID:", id);
        loadData(id);
        
        // 显示查询提示
        showToast(`正在查询ID: ${id}`, "info");
    } catch (error) {
        console.error("ID查询出错:", error);
        // 显示错误信息
        const tbody = document.getElementById("dataBody");
        if (tbody) {
            tbody.innerHTML = `<tr><td colspan="100" class="text-center">
                <div class="alert alert-danger">
                    <i class="bi bi-exclamation-circle"></i> 查询出错: ${error.message || "未知错误"}
                </div>
            </td></tr>`;
        }
        
        // 显示错误提示
        showToast(`查询出错: ${error.message || "未知错误"}`, "danger");
    }
}

// 显示创建表的模态框
function showCreateTableModal() {
    // 检查是否选择了数据库
    if (!currentDatabase) {
        alert("请先选择一个数据库");
        return;
    }

    // 清空表单
    document.getElementById("newTableName").value = "";
    document.getElementById("createTableSQL").value = "";

    // 显示模态框
    const createTableModal = new bootstrap.Modal(document.getElementById('createTableModal'));
    createTableModal.show();
}

// 处理创建表的逻辑
function createTableHandler() {
    const tableName = document.getElementById("newTableName").value.trim();
    const sql = document.getElementById("createTableSQL").value.trim();
    
    // 如果没有提供SQL，则表名是必需的
    if (!sql && !tableName) {
        alert("请输入表名或提供SQL语句");
        return;
    }
    
    const currentDB = document.getElementById("dbSelect").value;
    if (!currentDB) {
        alert("请先选择数据库");
        return;
    }
    
    // 显示加载状态
    const createBtn = document.getElementById("createTableBtn");
    const originalText = createBtn.textContent;
    createBtn.textContent = "创建中...";
    createBtn.disabled = true;
    
    // 发送请求创建表
    fetch(`/api/tables?database=${currentDB}`, {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            table_name: tableName,
            sql: sql
        })
    })
    .then(response => response.json())
    .then(data => {
        // 恢复按钮状态
        createBtn.textContent = originalText;
        createBtn.disabled = false;
        
        if (data.error) {
            alert("创建表失败: " + data.error);
        } else {
            // 关闭模态框
            const modal = bootstrap.Modal.getInstance(document.getElementById("createTableModal"));
            modal.hide();
            
            // 显示成功消息
            alert("表创建成功: " + (data.table_name || tableName));
            
            // 重新加载表列表
            loadTables();
        }
    })
    .catch(error => {
        console.error("创建表出错:", error);
        createBtn.textContent = originalText;
        createBtn.disabled = false;
        alert("创建表时发生错误，请查看控制台");
    });
}

// 更新分页控件
function updatePagination(pagination) {
    // 查找或创建分页容器
    let paginationContainer = document.getElementById('dataPagination');
    if (!paginationContainer) {
        paginationContainer = document.createElement('div');
        paginationContainer.id = 'dataPagination';
        paginationContainer.className = 'mt-3';
        
        // 将分页容器添加到数据表格后面
        const dataTable = document.getElementById('dataTable');
        if (dataTable && dataTable.parentNode) {
            dataTable.parentNode.insertBefore(paginationContainer, dataTable.nextSibling);
        }
    }
    
    // 如果只有一页，隐藏分页控件
    if (pagination.pages <= 1) {
        paginationContainer.style.display = 'none';
        return;
    }
    
    paginationContainer.style.display = 'block';
    
    // 创建分页UI
    let html = `
        <nav aria-label="数据分页">
            <ul class="pagination justify-content-center">
                <li class="page-item ${pagination.page <= 1 ? 'disabled' : ''}">
                    <a class="page-link" href="javascript:void(0)" onclick="loadData(null, 1)" aria-label="首页">
                        <span aria-hidden="true">&laquo;&laquo;</span>
                    </a>
                </li>
                <li class="page-item ${pagination.page <= 1 ? 'disabled' : ''}">
                    <a class="page-link" href="javascript:void(0)" onclick="loadData(null, ${pagination.page - 1})" aria-label="上一页">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
    `;
    
    // 计算要显示的页码范围
    let startPage = Math.max(1, pagination.page - 2);
    let endPage = Math.min(pagination.pages, pagination.page + 2);
    
    // 确保显示5个页码（如果有足够的页数）
    if (endPage - startPage < 4 && pagination.pages > 4) {
        if (startPage === 1) {
            endPage = Math.min(5, pagination.pages);
        } else if (endPage === pagination.pages) {
            startPage = Math.max(1, pagination.pages - 4);
        }
    }
    
    // 添加页码
    for (let i = startPage; i <= endPage; i++) {
        html += `
            <li class="page-item ${i === pagination.page ? 'active' : ''}">
                <a class="page-link" href="javascript:void(0)" onclick="loadData(null, ${i})">${i}</a>
            </li>
        `;
    }
    
    html += `
                <li class="page-item ${pagination.page >= pagination.pages ? 'disabled' : ''}">
                    <a class="page-link" href="javascript:void(0)" onclick="loadData(null, ${pagination.page + 1})" aria-label="下一页">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                <li class="page-item ${pagination.page >= pagination.pages ? 'disabled' : ''}">
                    <a class="page-link" href="javascript:void(0)" onclick="loadData(null, ${pagination.pages})" aria-label="末页">
                        <span aria-hidden="true">&raquo;&raquo;</span>
                    </a>
                </li>
            </ul>
            <div class="text-center text-muted">
                <small>共 ${pagination.total} 条记录，每页 ${pagination.limit} 条，当前第 ${pagination.page}/${pagination.pages} 页</small>
            </div>
        </nav>
    `;
    
    paginationContainer.innerHTML = html;
}

// 显示编辑列的模态框
function showEditColumnModal(columnName) {
    if (!currentTable) {
        alert("请先选择数据表");
        return;
    }

    // 查找列信息
    const column = columns.find(col => col.name === columnName);
    if (!column) {
        alert("未找到列信息");
        return;
    }

    // 创建模态框HTML
    const modalHtml = `
    <div class="modal fade" id="editColumnModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">编辑列属性</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">列名</label>
                            <input type="text" class="form-control" id="editColumnName" value="${column.name}">
                            <input type="hidden" id="originalColumnName" value="${column.name}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">数据类型</label>
                            <select id="editColumnType" class="form-select">
                                <!-- 字符串类型 -->
                                <optgroup label="字符串类型">
                                    <option value="TEXT" ${column.type === 'TEXT' ? 'selected' : ''}>文本</option>
                                    <option value="VARCHAR" ${column.type === 'VARCHAR' ? 'selected' : ''}>可变长文本</option>
                                    <option value="CHAR" ${column.type === 'CHAR' ? 'selected' : ''}>定长文本</option>
                                    <option value="LONGTEXT" ${column.type === 'LONGTEXT' ? 'selected' : ''}>长文本</option>
                                    <option value="MEDIUMTEXT" ${column.type === 'MEDIUMTEXT' ? 'selected' : ''}>中等文本</option>
                                    <option value="TINYTEXT" ${column.type === 'TINYTEXT' ? 'selected' : ''}>短文本</option>
                                </optgroup>
                                <!-- 数值类型 -->
                                <optgroup label="数值类型">
                                    <option value="INTEGER" ${column.type === 'INTEGER' || column.type === 'INT' ? 'selected' : ''}>整数</option>
                                    <option value="BIGINT" ${column.type === 'BIGINT' ? 'selected' : ''}>大整数</option>
                                    <option value="SMALLINT" ${column.type === 'SMALLINT' ? 'selected' : ''}>小整数</option>
                                    <option value="TINYINT" ${column.type === 'TINYINT' ? 'selected' : ''}>微整数</option>
                                    <option value="FLOAT" ${column.type === 'FLOAT' ? 'selected' : ''}>单精度浮点</option>
                                    <option value="DOUBLE" ${column.type === 'DOUBLE' ? 'selected' : ''}>双精度浮点</option>
                                    <option value="DECIMAL" ${column.type === 'DECIMAL' ? 'selected' : ''}>定点数</option>
                                </optgroup>
                                <!-- 日期和时间类型 -->
                                <optgroup label="日期和时间类型">
                                    <option value="DATE" ${column.type === 'DATE' ? 'selected' : ''}>日期</option>
                                    <option value="TIME" ${column.type === 'TIME' ? 'selected' : ''}>时间</option>
                                    <option value="DATETIME" ${column.type === 'DATETIME' ? 'selected' : ''}>日期时间</option>
                                    <option value="TIMESTAMP" ${column.type === 'TIMESTAMP' ? 'selected' : ''}>时间戳</option>
                                    <option value="YEAR" ${column.type === 'YEAR' ? 'selected' : ''}>年份</option>
                                </optgroup>
                                <!-- 其他类型 -->
                                <optgroup label="其他类型">
                                    <option value="BOOLEAN" ${column.type === 'BOOLEAN' ? 'selected' : ''}>布尔值</option>
                                    <option value="JSON" ${column.type === 'JSON' ? 'selected' : ''}>JSON</option>
                                </optgroup>
                            </select>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">长度/精度</label>
                                <input type="number" class="form-control" id="editColumnLength" value="${column.attributes.length || ''}">
                                <div class="form-text">例如：VARCHAR(255) 中的 255，DECIMAL(10,2) 中的 10</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">小数位数</label>
                                <input type="number" class="form-control" id="editColumnScale" value="${column.attributes.scale || ''}">
                                <div class="form-text">仅适用于 DECIMAL 类型，例如：DECIMAL(10,2) 中的 2</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">默认值</label>
                                <input type="text" class="form-control" id="editColumnDefaultValue" value="${column.attributes.defaultValue || ''}">
                                <div class="form-text">留空表示没有默认值</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">注释</label>
                                <input type="text" class="form-control" id="editColumnDescription" value="${column.comment || column.name}">
                                <div class="form-text">描述该列的用途，默认为列名</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3 form-check">
                                <input type="checkbox" class="form-check-input" id="editColumnNotNull" ${column.attributes.notNull ? 'checked' : ''}>
                                <label class="form-check-label" for="editColumnNotNull">非空 (NOT NULL)</label>
                            </div>
                            <div class="mb-3 form-check">
                                <input type="checkbox" class="form-check-input" id="editColumnUnique" ${column.attributes.unique ? 'checked' : ''}>
                                <label class="form-check-label" for="editColumnUnique">唯一 (UNIQUE)</label>
                            </div>
                            <div class="mb-3 form-check">
                                <input type="checkbox" class="form-check-input" id="editColumnUnsigned" ${column.attributes.unsigned ? 'checked' : ''}>
                                <label class="form-check-label" for="editColumnUnsigned">无符号 (UNSIGNED)</label>
                                <div class="form-text">仅适用于数值类型</div>
                            </div>
                            <div class="mb-3 form-check">
                                <input type="checkbox" class="form-check-input" id="editColumnAutoIncrement" ${column.attributes.autoIncrement ? 'checked' : ''}>
                                <label class="form-check-label" for="editColumnAutoIncrement">自动递增 (AUTO_INCREMENT)</label>
                                <div class="form-text">仅适用于整数类型，通常用于主键</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="updateColumnAttributes()">保存</button>
                </div>
            </div>
        </div>
    </div>`;

    // 添加模态框到DOM
    const modalContainer = document.createElement('div');
    modalContainer.innerHTML = modalHtml;
    document.body.appendChild(modalContainer);

    // 显示模态框
    const editModal = new bootstrap.Modal(document.getElementById('editColumnModal'));
    editModal.show();

    // 监听类型变化，动态调整属性设置
    const editColumnTypeSelect = document.getElementById("editColumnType");
    if (editColumnTypeSelect) {
        editColumnTypeSelect.addEventListener("change", updateEditColumnAttributeOptions);
        // 初始化时更新属性选项
        updateEditColumnAttributeOptions();
    }

    // 模态框关闭时移除DOM
    document.getElementById('editColumnModal').addEventListener('hidden.bs.modal', function () {
        document.body.removeChild(modalContainer);
    });
}

// 更新编辑列属性选项
function updateEditColumnAttributeOptions() {
    const columnType = document.getElementById("editColumnType").value;
    const isNumeric = ["INTEGER", "INT", "BIGINT", "SMALLINT", "TINYINT", "MEDIUMINT", "FLOAT", "DOUBLE", "DECIMAL"].includes(columnType.toUpperCase());
    const isDecimal = ["DECIMAL", "FLOAT", "DOUBLE"].includes(columnType.toUpperCase());
    
    // 更新无符号选项
    document.getElementById("editColumnUnsigned").disabled = !isNumeric;
    
    // 更新自动递增选项
    document.getElementById("editColumnAutoIncrement").disabled = !["INTEGER", "INT", "BIGINT", "SMALLINT", "TINYINT", "MEDIUMINT"].includes(columnType.toUpperCase());
    
    // 更新小数位数输入框
    document.getElementById("editColumnScale").disabled = !isDecimal;
    
    // 更新默认值输入框
    const defaultValueInput = document.getElementById("editColumnDefaultValue");
    const canHaveDefault = canHaveDefaultValue(columnType);
    defaultValueInput.disabled = !canHaveDefault;
    
    if (!canHaveDefault) {
        defaultValueInput.value = "";
        defaultValueInput.placeholder = "此类型不支持默认值";
    } else {
        defaultValueInput.placeholder = "默认值 (可选)";
    }
}

// 更新列属性
function updateColumnAttributes() {
    if (!currentTable) {
        alert("请先选择数据表");
        return;
    }

    const originalColumnName = document.getElementById("originalColumnName").value;
    const columnName = document.getElementById("editColumnName").value;
    const columnType = document.getElementById("editColumnType").value;

    if (!columnName) {
        alert("请输入列名");
        return;
    }

    if (!columnType) {
        alert("请选择数据类型");
        return;
    }

    // 获取列属性
    const notNull = document.getElementById("editColumnNotNull").checked;
    const defaultValue = document.getElementById("editColumnDefaultValue").value.trim();
    const unique = document.getElementById("editColumnUnique").checked;
    const length = document.getElementById("editColumnLength").value.trim();
    const scale = document.getElementById("editColumnScale").value.trim();
    const unsigned = document.getElementById("editColumnUnsigned").checked;
    const autoIncrement = document.getElementById("editColumnAutoIncrement").checked;
    // 获取列注释，如果为空则默认使用列名
    let comment = document.getElementById("editColumnDescription").value.trim();
    if (!comment) {
        comment = columnName;
    }

    // 显示加载状态
    const saveButton = document.querySelector('button[onclick="updateColumnAttributes()"]');
    const originalText = saveButton.textContent;
    saveButton.textContent = "保存中...";
    saveButton.disabled = true;

    // 构建列属性对象
    const columnData = {
        name: columnName,
        type: columnType,
        comment: comment,
        attributes: {
            notNull: notNull,
            defaultValue: defaultValue,
            unique: unique,
            length: length,
            scale: scale,
            unsigned: unsigned,
            autoIncrement: autoIncrement
        }
    };

    fetch(`/api/table/${currentTable}/column/${originalColumnName}?database=${encodeURIComponent(currentDatabase)}`, {
        method: "PATCH",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify(columnData)
    })
    .then(response => {
        if (!response.ok) {
            return response.json().then(err => {
                throw new Error(err.error || "修改列失败");
            });
        }
        return response.json();
    })
    .then(data => {
        // 关闭模态框
        const editModal = bootstrap.Modal.getInstance(document.getElementById('editColumnModal'));
        editModal.hide();
        
        // 显示成功消息
        showToast(`列 ${originalColumnName} 修改成功`, "success");
        
        // 重新加载表结构
        loadTableStructure();
        
        // 如果表格中已有数据，显示提示信息
        const tbody = document.getElementById("dataBody");
        if (tbody && tbody.innerHTML && !tbody.innerHTML.includes("alert-info")) {
            tbody.innerHTML = `<tr><td colspan="100" class="text-center">
                <div class="alert alert-info">
                    <i class="bi bi-info-circle"></i> 已修改列属性，请重新查询数据以查看更新后的结构
                </div>
            </td></tr>`;
        }
    })
    .catch(error => {
        // 恢复按钮状态
        saveButton.textContent = originalText;
        saveButton.disabled = false;
        
        // 显示错误消息
        alert("修改列失败: " + error.message);
        console.error("修改列错误:", error);
    });
}

// 中文查询表名
function searchMapTable() {
    const currentDB = document.getElementById("dbSelect").value;
    const tableName = document.getElementById("mapTableSelect").value;
    const sourceColumn = document.getElementById("mapSourceColumn").value;
    const targetColumn = document.getElementById("mapTargetColumn").value;
    const searchValue = document.getElementById("mapSearchSelect").value;
    
    console.log(`执行查询: 表=${tableName}, 源列=${sourceColumn}, 目标列=${targetColumn}, 查询值=${searchValue}`);
    
    // 验证输入
    if (!sourceColumn) {
        alert("请选择查询列");
        return;
    }
    
    if (!targetColumn) {
        alert("请选择目标列");
        return;
    }
    
    if (!searchValue) {
        alert("请选择查询值");
        return;
    }
    
    if (!currentDB) {
        alert("请选择数据库");
        return;
    }
    
    // 构建查询URL
    const url = `/api/map/search?database=${currentDB}&table=${tableName}&source_column=${sourceColumn}&target_column=${targetColumn}&value=${encodeURIComponent(searchValue)}`;
    
    // 发送请求
    fetch(url)
        .then(response => response.json())
        .then(data => {
            console.log("查询结果:", data);
            
            // 显示结果
            displayMapSearchResults(data, sourceColumn, targetColumn);
            
            // 高亮匹配的快速搜索按钮
            highlightQuickSearchButton(searchValue);
        })
        .catch(error => {
            console.error("查询出错:", error);
            alert("查询出错，请查看控制台获取详细信息");
        });
}

// 高亮快捷查询按钮
function highlightQuickSearchButton(value) {
    // 移除所有按钮的高亮
    document.querySelectorAll('.btn-group .btn').forEach(btn => {
        btn.classList.remove('active');
        btn.classList.remove('btn-primary');
        btn.classList.add('btn-outline-primary');
    });
    
    // 高亮匹配的按钮
    const matchingButton = Array.from(document.querySelectorAll('.btn-group .btn')).find(
        btn => btn.textContent.trim() === value
    );
    
    if (matchingButton) {
        matchingButton.classList.remove('btn-outline-primary');
        matchingButton.classList.add('btn-primary');
        matchingButton.classList.add('active');
    }
}

// 通过快捷按钮搜索
function searchByColumn(value) {
    // 设置查询值下拉列表
    const valueSelect = document.getElementById("mapSearchSelect");
    
    // 查找匹配的选项
    let found = false;
    for (let i = 0; i < valueSelect.options.length; i++) {
        if (valueSelect.options[i].value === value || 
            valueSelect.options[i].textContent === value) {
            valueSelect.selectedIndex = i;
            found = true;
            break;
        }
    }
    
    // 如果没有找到匹配的选项，可能需要加载列值
    if (!found) {
        console.log(`未找到匹配的选项: ${value}，尝试加载列值`);
        
        // 加载列值后再次尝试设置值
        loadColumnValues();
        
        // 使用setTimeout等待列值加载完成
        setTimeout(() => {
            for (let i = 0; i < valueSelect.options.length; i++) {
                if (valueSelect.options[i].value === value || 
                    valueSelect.options[i].textContent === value) {
                    valueSelect.selectedIndex = i;
                    break;
                }
            }
            
            // 执行查询
            searchMapTable();
        }, 500);
        
        return;
    }
    
    // 执行查询
    searchMapTable();
}

// 显示映射表查询结果
function displayMapSearchResults(results, sourceColumn, targetColumn) {
    console.log(`显示查询结果: ${results.length}条, 源列: ${sourceColumn}, 目标列: ${targetColumn}`);
    
    // 获取显示名称
    const sourceDisplayName = getColumnDisplayName(sourceColumn);
    const targetDisplayName = getColumnDisplayName(targetColumn);
    
    // 更新表头
    const header = document.getElementById("mapSearchResultsHeader");
    header.innerHTML = `
        <tr>
            <th>${sourceDisplayName}</th>
            <th>${targetDisplayName}</th>
            <th>操作</th>
        </tr>
    `;
    
    // 清空现有结果
    const resultsBody = document.getElementById("mapSearchResultsBody");
    resultsBody.innerHTML = '';
    
    // 检查是否有结果
    if (!results || results.length === 0) {
        // 显示无结果消息
        resultsBody.innerHTML = `
            <tr>
                <td colspan="3" class="text-center">未找到匹配的记录</td>
            </tr>
        `;
        document.getElementById("mapSearchResults").style.display = "block";
        return;
    }
    
    // 添加结果行
    results.forEach(item => {
        const row = document.createElement("tr");
        
        // 源列值
        const sourceCell = document.createElement("td");
        sourceCell.textContent = item.source_value;
        row.appendChild(sourceCell);
        
        // 目标列值
        const targetCell = document.createElement("td");
        targetCell.textContent = item.target_value;
        row.appendChild(targetCell);
        
        // 操作按钮
        const actionCell = document.createElement("td");
        
        // 根据目标列类型决定按钮
        if (targetColumn === 'main_table' && item.target_value && item.target_value.match(/^[a-zA-Z0-9_]+$/)) {
            // 如果目标列是表名，并且值看起来像表名，提供"选择此表"按钮
            const selectBtn = document.createElement("button");
            selectBtn.className = "btn btn-sm btn-primary";
            selectBtn.textContent = "选择此表";
            selectBtn.onclick = function() {
                selectTableFromMap(item.target_value);
            };
            actionCell.appendChild(selectBtn);
        } else {
            // 否则提供复制按钮
            const copyBtn = document.createElement("button");
            copyBtn.className = "btn btn-sm btn-outline-secondary";
            copyBtn.innerHTML = '<i class="bi bi-clipboard"></i> 复制';
            copyBtn.onclick = function() {
                copyToClipboard(item.target_value);
                this.innerHTML = '<i class="bi bi-check"></i> 已复制';
                setTimeout(() => {
                    this.innerHTML = '<i class="bi bi-clipboard"></i> 复制';
                }, 2000);
            };
            actionCell.appendChild(copyBtn);
        }
        
        row.appendChild(actionCell);
        resultsBody.appendChild(row);
    });
    
    // 显示结果容器
    document.getElementById("mapSearchResults").style.display = "block";
}

// 获取列的显示名称
function getColumnDisplayName(columnName) {
    // 从当前加载的列信息中获取显示名称
    const columnsData = window.currentColumnsData || [];
    
    // 查找匹配的列
    const column = columnsData.find(col => col.name === columnName);
    
    // 如果找到列并且有注释，返回注释作为显示名称
    if (column && column.comment) {
        return column.comment;
    }
    
    // 如果没有找到或没有注释，返回原列名
    return columnName;
}

// 复制文本到剪贴板
function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(() => {
        showToast('已复制到剪贴板', 'success');
    }).catch(err => {
        console.error('复制失败:', err);
        alert('复制失败，请手动复制');
    });
}

// 从映射结果中选择表
function selectTableFromMap(tableName) {
    const tableSelect = document.getElementById("tableSelect");
    
    // 检查表是否在下拉列表中
    let found = false;
    for (let i = 0; i < tableSelect.options.length; i++) {
        if (tableSelect.options[i].value === tableName) {
            tableSelect.selectedIndex = i;
            found = true;
            break;
        }
    }
    
    if (!found) {
        // 如果表不在下拉列表中，添加它
        const option = document.createElement("option");
        option.value = tableName;
        option.textContent = tableName;
        tableSelect.appendChild(option);
        tableSelect.value = tableName;
    }
    
    // 触发表变更事件
    onTableChange();
    
    // 滚动到表结构管理部分
    document.querySelector("h2").scrollIntoView({ behavior: "smooth" });
}

// 清除查询
function clearMapSearch() {
    // 清除查询值下拉列表选择
    document.getElementById("mapSearchSelect").value = "";
    
    // 隐藏结果
    document.getElementById("mapSearchResults").style.display = "none";
    
    // 清除结果表格内容
    document.getElementById("mapSearchResultsBody").innerHTML = "";
    
    // 取消高亮所有快速搜索按钮
    const quickSearchButtons = document.querySelectorAll('.btn-group button');
    quickSearchButtons.forEach(btn => {
        btn.classList.remove('active');
        btn.classList.replace('btn-primary', 'btn-outline-primary');
    });
    
    console.log("已清除查询");
}

// 页面加载完成后执行
document.addEventListener("DOMContentLoaded", function() {
    console.log("页面加载完成，开始初始化...");
    
    // 加载数据库配置
    loadDBConfig();
    
    // 加载数据库列表
    loadDatabases();
    
    // 初始化列属性选项
    initColumnAttributes();
    
    // 设置创建表按钮事件
    document.getElementById("createTableBtn").addEventListener("click", createTableHandler);
    
    console.log("页面初始化完成");
});

// 初始化表格选择下拉框
function initMapTableSelect() {
    console.log("初始化表格选择下拉框");
    
    // 获取表格选择下拉框
    const mapTableSelect = document.getElementById("mapTableSelect");
    const dbSelect = document.getElementById("dbSelect");
    
    // 为数据库下拉框添加变更事件
    dbSelect.addEventListener("change", function() {
        console.log("数据库选择变更，更新表格下拉框");
        updateMapTableSelect();
    });
    
    // 为表格下拉框添加变更事件
    mapTableSelect.addEventListener("change", function() {
        const selectedTable = mapTableSelect.value;
        console.log(`表格选择变更为: ${selectedTable}`);
        
        if (selectedTable) {
            loadTableColumnsForTable(selectedTable);
        }
    });
    
    // 为查询列下拉框添加变更事件
    document.getElementById("mapSourceColumn").addEventListener("change", function() {
        console.log("源列选择变更，更新搜索框placeholder和加载列值");
        updateMapSearchPlaceholder();
        loadColumnValues();
    });
    
    // 为目标列下拉框添加变更事件
    document.getElementById("mapTargetColumn").addEventListener("change", function() {
        console.log("目标列选择变更");
    });
    
    console.log("表格选择下拉框初始化完成");
}

// 为特定表加载列
function loadTableColumnsForTable(tableName) {
    const currentDB = document.getElementById("dbSelect").value;
    if (!currentDB) {
        console.log("数据库未选择，无法加载列");
        return;
    }
    
    console.log(`正在加载表 ${tableName} 的列...`);
    
    // 获取表结构
    fetch(`/api/table/${tableName}?database=${currentDB}`)
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                console.error("获取表结构失败:", data.error);
                return;
            }
            
            // 确保data.columns是一个数组
            if (!Array.isArray(data.columns)) {
                console.error("API返回的columns不是数组:", data);
                
                // 尝试直接使用data作为列数组（如果它是数组）
                if (Array.isArray(data)) {
                    console.log("使用API返回的data作为列数组");
                    updateColumnDropdowns(data);
                    return;
                }
                
                return;
            }
            
            console.log(`成功获取表 ${tableName} 的列:`, data.columns);
            console.log(`列数量: ${data.columns.length}`);
            
            // 打印每个列的name和comment
            data.columns.forEach((col, index) => {
                console.log(`列 ${index+1}: name=${col.name}, comment=${col.comment || '无'}`);
            });
            
            // 更新查询列和目标列下拉框
            updateColumnDropdowns(data.columns);
        })
        .catch(error => {
            console.error("获取表结构出错:", error);
        });
}

// 加载表的列
function loadTableColumns() {
    const tableName = document.getElementById("mapTableSelect").value;
    if (!tableName) {
        console.log("表未选择，无法加载列");
        return;
    }
    
    loadTableColumnsForTable(tableName);
}

// 更新查询列和目标列下拉框
function updateColumnDropdowns(columns) {
    console.log("更新列下拉框，列数:", columns ? columns.length : 0);
    
    // 保存列数据到全局变量，以便其他函数可以访问
    window.currentColumnsData = columns || [];
    
    const sourceColumn = document.getElementById("mapSourceColumn");
    const targetColumn = document.getElementById("mapTargetColumn");
    
    // 保存当前选中的值
    const currentSourceValue = sourceColumn.value;
    const currentTargetValue = targetColumn.value;
    
    // 清空现有选项
    sourceColumn.innerHTML = '';
    targetColumn.innerHTML = '';
    
    // 为所有表添加列选项
    if (columns && columns.length > 0) {
        console.log("添加列选项到下拉框");
        
        // 先按name字段排序
        columns.sort((a, b) => {
            // 将id放在最前面
            if (a.name === 'id') return -1;
            if (b.name === 'id') return 1;
            return a.name.localeCompare(b.name);
        });
        
        columns.forEach(col => {
            // 确保col.name存在
            if (!col.name) {
                console.warn("列缺少name属性:", col);
                return;
            }
            
            // 获取显示名称
            const displayName = getColumnDisplayName(col.name);
            
            // 创建源列选项
            const sourceOpt = document.createElement("option");
            sourceOpt.value = col.name;  // 值使用实际的列名
            sourceOpt.textContent = displayName;  // 显示名称使用映射后的名称
            sourceColumn.appendChild(sourceOpt);
            
            // 创建目标列选项
            const targetOpt = document.createElement("option");
            targetOpt.value = col.name;  // 值使用实际的列名
            targetOpt.textContent = displayName;  // 显示名称使用映射后的名称
            targetColumn.appendChild(targetOpt);
            
            console.log(`添加列选项: ${col.name} (显示为: ${displayName})`);
        });
    } else {
        console.log("没有列可添加到下拉框");
        // 如果没有列，添加一个默认选项
        const defaultOption = document.createElement("option");
        defaultOption.value = "";
        defaultOption.textContent = "无可用列";
        sourceColumn.appendChild(defaultOption);
        
        const defaultTargetOption = document.createElement("option");
        defaultTargetOption.value = "";
        defaultTargetOption.textContent = "无可用列";
        targetColumn.appendChild(defaultTargetOption);
    }
    
    console.log("列下拉框更新完成，源列选项数:", sourceColumn.options.length);
    console.log("列下拉框更新完成，目标列选项数:", targetColumn.options.length);
    
    // 尝试恢复之前选中的值
    if (currentSourceValue && Array.from(sourceColumn.options).some(opt => opt.value === currentSourceValue)) {
        sourceColumn.value = currentSourceValue;
        console.log(`恢复源列选择: ${currentSourceValue}`);
    } else if (sourceColumn.options.length > 0) {
        // 默认选择第一个选项
        sourceColumn.selectedIndex = 0;
        console.log(`默认选择第一个源列: ${sourceColumn.value}`);
    }
    
    if (currentTargetValue && Array.from(targetColumn.options).some(opt => opt.value === currentTargetValue)) {
        targetColumn.value = currentTargetValue;
        console.log(`恢复目标列选择: ${currentTargetValue}`);
    } else if (targetColumn.options.length > 1) {
        // 如果目标列没有匹配的值，选择第一个不同于源列的选项
        const firstValue = sourceColumn.value;
        for (let i = 0; i < targetColumn.options.length; i++) {
            if (targetColumn.options[i].value !== firstValue) {
                targetColumn.selectedIndex = i;
                console.log(`选择不同于源列的目标列: ${targetColumn.value}`);
                break;
            }
        }
    } else if (targetColumn.options.length > 0) {
        // 如果只有一个选项，就选它
        targetColumn.selectedIndex = 0;
        console.log(`只有一个目标列选项，选择: ${targetColumn.value}`);
    }
    
    // 更新搜索框的placeholder
    updateMapSearchPlaceholder();
    
    // 加载列值
    loadColumnValues();
}

// 更新搜索框的placeholder
function updateMapSearchPlaceholder() {
    const sourceColumn = document.getElementById("mapSourceColumn");
    const valueSelect = document.getElementById("mapSearchSelect");
    
    if (sourceColumn && sourceColumn.value) {
        // 获取选中列的显示名称
        const displayName = getColumnDisplayName(sourceColumn.value);
        
        // 更新下拉列表的默认选项文本
        if (valueSelect.options.length > 0 && valueSelect.options[0].value === "") {
            valueSelect.options[0].textContent = `请选择${displayName}...`;
        }
        
        console.log(`更新查询值下拉列表默认选项为: 请选择${displayName}...`);
    } else {
        // 恢复默认文本
        if (valueSelect.options.length > 0 && valueSelect.options[0].value === "") {
            valueSelect.options[0].textContent = "请选择查询值...";
        }
        
        console.log("更新查询值下拉列表默认选项为默认值");
    }
}

// 更新表格选择下拉框
function updateMapTableSelect() {
    const currentDB = document.getElementById("dbSelect").value;
    if (!currentDB) {
        console.log("数据库未选择，无法更新表格下拉框");
        return;
    }
    
    console.log("正在更新表格下拉框...");
    
    const mapTableSelect = document.getElementById("mapTableSelect");
    
    // 保存当前选中的值
    const currentValue = mapTableSelect.value;
    
    // 清空现有选项，但保留jd_map_table
    mapTableSelect.innerHTML = '<option value="jd_map_table">jd_map_table</option>';
    
    // 获取数据库中的表
    fetch(`/api/tables?database=${currentDB}`)
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                console.error("获取表失败:", data.error);
                return;
            }
            
            console.log("成功获取表列表:", data.tables.length);
            
            // 添加表到下拉框
            data.tables.forEach(table => {
                if (table !== "jd_map_table") { // 避免重复添加jd_map_table
                    const option = document.createElement("option");
                    option.value = table;
                    option.textContent = table;
                    mapTableSelect.appendChild(option);
                }
            });
            
            // 尝试恢复之前选中的值
            if (currentValue && Array.from(mapTableSelect.options).some(opt => opt.value === currentValue)) {
                mapTableSelect.value = currentValue;
            }
            
            console.log("表格下拉框更新完成，选项数:", mapTableSelect.options.length);
        })
        .catch(error => {
            console.error("获取表出错:", error);
        });
}

// 加载列的所有可能值
function loadColumnValues() {
    const currentDB = document.getElementById("dbSelect").value;
    const tableName = document.getElementById("mapTableSelect").value;
    const sourceColumn = document.getElementById("mapSourceColumn").value;
    
    if (!currentDB || !tableName || !sourceColumn) {
        console.log("数据库、表或列未选择，无法加载列值");
        return;
    }
    
    console.log(`正在加载 ${tableName} 表 ${sourceColumn} 列的所有值...`);
    
    // 获取列值
    fetch(`/api/data/${tableName}?database=${currentDB}&distinct=${sourceColumn}`)
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                console.error("获取列值失败:", data.error);
                return;
            }
            
            // 获取查询值下拉列表
            const valueSelect = document.getElementById("mapSearchSelect");
            
            // 清空现有选项
            valueSelect.innerHTML = '';
            
            // 添加默认选项
            const defaultOption = document.createElement("option");
            defaultOption.value = "";
            defaultOption.textContent = "请选择查询值...";
            valueSelect.appendChild(defaultOption);
            
            // 确保data.data是一个数组
            const items = data.data || [];
            
            if (items.length === 0) {
                console.log(`${tableName} 表 ${sourceColumn} 列没有数据`);
                return;
            }
            
            console.log(`成功获取 ${items.length} 个记录`);
            
            // 添加所有唯一值
            const uniqueValues = new Set();
            
            items.forEach(item => {
                // 获取当前列的值
                const value = item.Fields ? item.Fields[sourceColumn] : item[sourceColumn];
                
                // 如果值不为空且不重复，添加到下拉列表
                if (value && !uniqueValues.has(value)) {
                    uniqueValues.add(value);
                    
                    const option = document.createElement("option");
                    option.value = value;
                    option.textContent = value;
                    valueSelect.appendChild(option);
                }
            });
            
            console.log(`添加了 ${uniqueValues.size} 个唯一值到下拉列表`);
        })
        .catch(error => {
            console.error("获取列值出错:", error);
        });
}

// 通过name查询数据
function searchByName() {
    try {
        if (!currentTable) {
            alert("请先选择一个数据表");
            console.log("未选择数据表");
            return;
        }
        
        const searchNameInput = document.getElementById('searchName');
        if (!searchNameInput) {
            console.log("未找到name输入框");
            return;
        }
        
        const name = searchNameInput.value.trim();
        console.log("查询name:", name);
        
        if (!name) {
            alert("请输入要查询的name");
            console.log("name为空");
            return;
        }
        
        // 显示加载状态
        const tbody = document.getElementById("dataBody");
        if (tbody) {
            tbody.innerHTML = `<tr><td colspan="100" class="text-center">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">加载中...</span>
                </div>
                <span class="ms-2">数据加载中，请稍候...</span>
            </td></tr>`;
        }
        
        // 构建查询URL
        let url = `/api/data/${currentTable}?database=${encodeURIComponent(currentDatabase)}&name=${encodeURIComponent(name)}`;
        
        fetch(url)
            .then(res => {
                if (!res.ok) {
                    return res.json().then(data => {
                        throw new Error(data.error || "加载数据失败");
                    });
                }
                return res.json();
            })
            .then(response => {
                console.log("获取到的响应:", response);
                
                // 处理不同的响应格式
                let dataArray = [];
                let pagination = { total: 0, page: 1, limit: 10, pages: 1 };
                
                // 检查响应格式
                if (Array.isArray(response)) {
                    // 旧格式：直接是数组
                    dataArray = response;
                } else if (response && typeof response === 'object') {
                    if (response.data && Array.isArray(response.data)) {
                        // 新格式：包含data字段的对象
                        dataArray = response.data;
                        pagination = response.pagination || pagination;
                    } else if (response.data && response.data.id) {
                        // 单条记录查询，data字段包含单个对象
                        dataArray = [response.data];
                    } else if (response.id) {
                        // 单条记录查询可能直接返回对象（没有包装在data字段中）
                        dataArray = [response];
                    } else {
                        // 其他情况，尝试作为单个对象处理
                        console.log("未识别的响应格式，尝试作为单个对象处理:", response);
                        dataArray = [response];
                    }
                }
                
                // 更新表格
                updateDataTable(dataArray);
                
                // 如果没有数据，显示提示信息
                if (dataArray.length === 0) {
                    if (tbody) {
                        const colSpan = columns.length + 1; // 列数 + 操作列
                        tbody.innerHTML = `<tr><td colspan="${colSpan}" class="text-center">未找到匹配的数据</td></tr>`;
                    }
                }
            })
            .catch(error => {
                console.error("查询失败:", error);
                if (tbody) {
                    tbody.innerHTML = `<tr><td colspan="100" class="text-center text-danger">
                        <i class="bi bi-exclamation-triangle"></i> 查询失败: ${error.message}
                    </td></tr>`;
                }
            });
    } catch (error) {
        console.error("searchByName执行出错:", error);
    }
}

// 更新数据表格
function updateDataTable(dataArray) {
    const tbody = document.getElementById("dataBody");
    if (!tbody) {
        console.log("未找到数据表格元素");
        return;
    }
    
    tbody.innerHTML = "";
    
    // 检查columns是否存在且不为空
    if (!columns || columns.length === 0) {
        console.log("列结构为空，尝试重新加载表结构");
        // 尝试重新加载表结构，但不显示错误提示
        loadTableStructure();
        return;
    }
    
    // 使用文档片段提高性能
    const fragment = document.createDocumentFragment();
    
    dataArray.forEach(item => {
        if (!item) return; // 跳过null或undefined项
        
        console.log("处理数据项:", item, "ID:", item.id);
        const tr = document.createElement('tr');
        
        // 确保按照表结构中的列顺序显示数据
        columns.forEach(col => {
            if (!col) return; // 跳过null或undefined列
            
            const td = document.createElement('td');
            
            if (col.name && col.name.toLowerCase() === 'id') {
                td.textContent = item.id || "";
            } else if (col.name) {
                // 尝试以不区分大小写的方式查找字段值
                let value = null;
                // 首先尝试直接使用列名
                if (item.fields && item.fields[col.name] !== undefined) {
                    value = item.fields[col.name];
                } else if (item.fields) {
                    // 如果找不到，尝试查找不区分大小写的字段名
                    const fieldKeys = Object.keys(item.fields || {});
                    const fieldName = fieldKeys.find(
                        key => key.toLowerCase() === col.name.toLowerCase()
                    );
                    if (fieldName) {
                        value = item.fields[fieldName];
                    }
                }
                td.textContent = value !== null && value !== undefined ? value : "";
            }
            
            tr.appendChild(td);
        });
        
        // 添加操作按钮
        const actionTd = document.createElement('td');
        actionTd.innerHTML = `
            <button class="btn btn-warning btn-sm" onclick="editData(${item.id || 0})">编辑</button>
            <button class="btn btn-danger btn-sm" onclick="deleteData(${item.id || 0})">删除</button>
        `;
        tr.appendChild(actionTd);
        
        fragment.appendChild(tr);
    });
    
    tbody.appendChild(fragment);
}

// 切换高级筛选区域的显示/隐藏
function toggleAdvancedFilter() {
    const filterArea = document.getElementById('advancedFilterArea');
    if (filterArea) {
        if (filterArea.style.display === 'none') {
            filterArea.style.display = 'block';
            updateFilterFieldOptions();
        } else {
            filterArea.style.display = 'none';
        }
    }
}

// 更新筛选字段选项
function updateFilterFieldOptions() {
    if (!columns || columns.length === 0) {
        console.log("列结构为空，无法更新筛选字段选项");
        return;
    }
    
    // 获取所有筛选字段选择器
    const fieldSelects = document.querySelectorAll('.filter-field');
    
    fieldSelects.forEach(select => {
        // 保存当前选中的值
        const currentValue = select.value;
        
        // 清空现有选项，但保留第一个默认选项
        while (select.options.length > 1) {
            select.remove(1);
        }
        
        // 添加列为选项
        columns.forEach(col => {
            if (col && col.name && col.name.toLowerCase() !== 'id') {
                const option = document.createElement('option');
                option.value = col.name;
                option.textContent = col.comment || col.name;
                select.appendChild(option);
            }
        });
        
        // 恢复之前选中的值（如果存在）
        if (currentValue) {
            for (let i = 0; i < select.options.length; i++) {
                if (select.options[i].value === currentValue) {
                    select.selectedIndex = i;
                    break;
                }
            }
        }
    });
}

// 添加新的筛选条件
function addFilterCondition() {
    const conditionsContainer = document.getElementById('filterConditions');
    if (!conditionsContainer) return;
    
    // 创建新的筛选条件行
    const newCondition = document.createElement('div');
    newCondition.className = 'filter-condition mb-2';
    
    newCondition.innerHTML = `
        <div class="row g-2">
            <div class="col-5">
                <select class="form-select filter-field">
                    <option value="">选择字段</option>
                </select>
            </div>
            <div class="col-3">
                <select class="form-select filter-operator">
                    <option value="eq">等于</option>
                    <option value="ne">不等于</option>
                    <option value="gt">大于</option>
                    <option value="lt">小于</option>
                    <option value="like">包含</option>
                </select>
            </div>
            <div class="col-3">
                <input type="text" class="form-control filter-value" placeholder="值">
            </div>
            <div class="col-1">
                <button class="btn btn-outline-danger btn-sm" onclick="this.closest('.filter-condition').remove()">
                    <i class="bi bi-x"></i>
                </button>
            </div>
        </div>
    `;
    
    conditionsContainer.appendChild(newCondition);
    updateFilterFieldOptions();
}

// 清除所有筛选条件
function clearFilters() {
    const conditionsContainer = document.getElementById('filterConditions');
    if (!conditionsContainer) return;
    
    // 保留第一个条件，但清空其值
    const conditions = conditionsContainer.querySelectorAll('.filter-condition');
    
    if (conditions.length > 0) {
        // 清空第一个条件的值
        const firstCondition = conditions[0];
        const fieldSelect = firstCondition.querySelector('.filter-field');
        const operatorSelect = firstCondition.querySelector('.filter-operator');
        const valueInput = firstCondition.querySelector('.filter-value');
        
        if (fieldSelect) fieldSelect.selectedIndex = 0;
        if (operatorSelect) operatorSelect.selectedIndex = 0;
        if (valueInput) valueInput.value = '';
        
        // 移除其他所有条件
        for (let i = 1; i < conditions.length; i++) {
            conditions[i].remove();
        }
    }
    
    // 清空单条件筛选框
    const searchIdInput = document.getElementById('searchId');
    const searchNameInput = document.getElementById('searchName');
    
    if (searchIdInput) searchIdInput.value = '';
    if (searchNameInput) searchNameInput.value = '';
    
    // 重新加载数据
    loadData();
}

// 将操作符转换为MySQL语法
function getOperatorSql(operator) {
    switch(operator) {
        case 'eq': return '=';
        case 'ne': return '!=';
        case 'gt': return '>';
        case 'lt': return '<';
        case 'like': return 'LIKE';
        default: return '=';
    }
}

// 应用多条件筛选
function applyMultiFilter() {
    if (!currentTable) {
        alert("请先选择一个数据表");
        return;
    }
    
    const conditions = document.querySelectorAll('.filter-condition');
    const filters = [];
    
    // 收集所有有效的筛选条件
    conditions.forEach(condition => {
        const fieldSelect = condition.querySelector('.filter-field');
        const operatorSelect = condition.querySelector('.filter-operator');
        const valueInput = condition.querySelector('.filter-value');
        
        if (fieldSelect && operatorSelect && valueInput) {
            const field = fieldSelect.value;
            const operator = operatorSelect.value;
            const value = valueInput.value.trim();
            
            if (field && value) {
                filters.push({
                    field: field,
                    operator: operator,
                    value: value
                });
            }
        }
    });
    
    if (filters.length === 0) {
        alert("请至少添加一个有效的筛选条件");
        return;
    }
    
    // 显示加载状态
    const tbody = document.getElementById("dataBody");
    if (tbody) {
        tbody.innerHTML = `<tr><td colspan="100" class="text-center">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <span class="ms-2">应用筛选条件，数据加载中...</span>
        </td></tr>`;
    }
    
    // 构建查询参数
    const queryParams = new URLSearchParams();
    queryParams.append('database', currentDatabase);
    queryParams.append('limit', pageSize);
    queryParams.append('page', 1);
    
    // 添加筛选条件
    filters.forEach((filter, index) => {
        queryParams.append(`field${index}`, filter.field);
        queryParams.append(`op${index}`, filter.operator);
        queryParams.append(`value${index}`, filter.value);
    });
    
    // 构建查询URL
    const url = `/api/data/${currentTable}?${queryParams.toString()}`;
    
    fetch(url)
        .then(res => {
            if (!res.ok) {
                return res.json().then(data => {
                    throw new Error(data.error || "筛选数据失败");
                });
            }
            return res.json();
        })
        .then(response => {
            console.log("筛选响应:", response);
            
            // 处理响应数据
            let dataArray = [];
            let pagination = { total: 0, page: 1, limit: pageSize, pages: 1 };
            
            if (response && typeof response === 'object') {
                if (response.data && Array.isArray(response.data)) {
                    dataArray = response.data;
                    pagination = response.pagination || pagination;
                } else {
                    console.log("未识别的响应格式:", response);
                    dataArray = [];
                }
            }
            
            // 更新表格
            updateDataTable(dataArray);
            
            // 更新分页
            updatePagination(pagination);
            
            // 显示筛选结果数量
            const resultCount = dataArray.length;
            const totalCount = pagination.total;
            
            const infoMessage = `筛选结果: 当前页 ${resultCount} 条记录，共 ${totalCount} 条`;
            showToast(infoMessage, "info");
        })
        .catch(error => {
            console.error("应用筛选条件失败:", error);
            alert("应用筛选条件失败: " + error.message);
            
            if (tbody) {
                tbody.innerHTML = `<tr><td colspan="100" class="text-center text-danger">
                    筛选失败: ${error.message}
                </td></tr>`;
            }
        });
} 